<template>
  <div class="input-group">
    <div class="input-group-item" v-for="(item,index) in myValue" :key="index">
      <el-time-picker  style="margin-bottom:10px;"
          v-bind="$props"
          @change="handleChange(index,$event)"
          is-range
          v-model="item.value"
          placeholder="选择时间范围">
      </el-time-picker>
      <el-button size="small" icon="minus" v-if="index!==0" @click="handleRemove(index)" :disabled="disabled">
      </el-button>
    </div>
  </div>
</template>

<script>

  import * as ui from 'l-element'

  export default {
    props: {
      ...ui.default.TimePicker.props, // 继承TimePicker的所有属性
      value: {
        type: Array
      }
    },
    watch: {
      value (value) {
        this.myValue = value
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = ['']
      }
      return {
        myValue
      }
    },
    methods: {
      handleChange (index, value) {
        this.myValue[index] = value
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleAdd (index) {
        this.myValue.push({value: ''})
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      }
    }
  }
</script>

<style lang="scss">
    @import '~styles/var.scss';

</style>
